<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
  .kerwin-enter-active, .kerwin-leave-active {
    transition: all .5s
  }
  .kerwin-enter, .kerwin-leave-to /* .fade-leave-active in below version 2.1.8 */ {
    opacity: 0;
    transform: translateX(100px);
  }



   .bounce-enter-active {
    animation: bounce-in .5s;
  }
  .bounce-leave-active {
    animation: bounce-in .5s reverse;
  }
  @keyframes bounce-in {
    
    0%{
      transform: translateX(100px);
      opacity: 0;
    }

    100%{
      transform: translateX(0px);
      opacity: 1;
    }
  }
</style>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>


    <!-- <div class="animated  hinge infinite">1111111111111</div> -->
    <div id="box">
        <button @click="isShow= !isShow">click</button>

        <transition name="bounce" mode="out-in">
          <p v-if="isShow" key="1">11111111111</p>
          <p v-else key="2">222222222</p>
        </transition>

    </div>

    <script>
      var vm = new Vue({
        el:"#box",
        data:{
          isShow:true
        }
      })

    </script>
</body>
</html>